<template>
	<div v-if="list" class="yh_content">
		<div style="display: flex;justify-content: space-between">
			<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px;">
				<div class="block" style="display: flex">
					<div style="margin-left: 10px">
						<div class="hei20 yh_qs yh_font13">卡状态</div>
						<el-select v-model="search.card_state" style="width: 140px" size="small" placeholder="请选择">
							<el-option v-for="item in statuslist" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div style="margin-left: 10px">
						<div class="hei20 yh_qs yh_font13">卡名称</div>
						<el-input v-model="search.name" size="small" placeholder="卡名称" />
					</div>
					<div style="margin-left: 10px">
						<el-button type="primary" size="small" class="mar-top20 bac6b7"
							@click.stop="getList">搜索</el-button>
					</div>
				</div>
			</div>
			<div>
				<router-link :to="'/member/editmembercardname?type=1'" style="margin-right: 18px">
					<el-button size="small" class="bace84 mar-top20" type="primary"><i
							class="el-icon-circle-plus-outline" />体验卡种类</el-button>
				</router-link>
				<router-link :to="'/member/editmembercardname?type=0'" style="margin-right: 18px">
					<el-button size="small" class="bac759 mar-top20" type="success"><i
							class="el-icon-circle-plus-outline" />会员卡种类</el-button>
				</router-link>
			</div>
		</div>
		<div v-if="list.numtime.length > 0" style="padding: 10px;margin-top: 20px">
			<div class="small_title">次数卡</div>
			<div style="display: flex;flex-wrap: wrap;">
				<div v-for="(item,index) in list.numtime" :key="index" class="carditem">
					<img v-if="item.brand_id===0" src="../../assets/member/card/is_common_card.png" class="xuanfu">
					<div style="display: flex;align-items: center">
						<div>
							<img class="typeimg" src="../../assets/member/card/csk.jpg">
						</div>
						<div style="margin-left: 15px;font-size: 18px">
              <div>{{ item.name }}</div>
              <div style="font-size: 12px;color: #666666;">ID:{{ item.id }}</div>
            </div>
					</div>
					<div
						style="display: flex;justify-content: space-between;color: #f49352;margin-top: 15px;font-size: 16px">
						<div>售价：{{ item.sell_price }}</div>
						<div>有效期：{{ item.card_period }}{{ item.card_period_type === 1?'天':'个月' }}</div>
					</div>
					<div v-if="item.brand_id == venue.id" class="dis mar-top15">
						<router-link :to="'/member/editmembercardname?type='+item.card_is_experience+'&id='+item.id">
							<div style="color: #6b7cdd;" class="mar-right20 cuPo foSi14"><i
									class="el-icon-edit-outline mar-right5" />编辑</div>
						</router-link>
						<div style="color: #00000;" class="mar-right20 cuPo foSi14" @click.stop="deleteClick(item.id)">
							<i class="el-icon-delete mar-right5" />删除
						</div>
						<div v-if="item.card_state === 0" style="color: #000;" class="mar-right20 cuPo foSi14"
							@click.stop="tingClick(item.id,1)"><i class="el-icon-warning-outline mar-right5" />停用</div>
						<div v-if="item.card_state === 1" style="color: #000;" class="mar-right20 cuPo foSi14"
							@click.stop="tingClick(item.id,0)"><i class="el-icon-switch-button mar-right5" />启用</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="list.term.length > 0" style="padding: 10px;margin-top: 20px">
			<div class="small_title">期限卡</div>
			<div style="display: flex;flex-wrap: wrap;">
				<div v-for="(item,index) in list.term" :key="index" class="carditem">
					<img v-if="item.brand_id===0" src="../../assets/member/card/is_common_card.png" class="xuanfu">
					<div style="display: flex;align-items: center">
						<div>
							<img class="typeimg" src="../../assets/member/card/sck.jpg">
						</div>
						<div style="margin-left: 15px;font-size: 18px">
              <div>{{ item.name }}</div>
              <div style="font-size: 12px;color: #666666;">ID:{{ item.id }}</div>
            </div>
					</div>
					<div
						style="display: flex;justify-content: space-between;color: #f49352;margin-top: 15px;font-size: 16px">
						<div>售价：{{ item.sell_price }}</div>
						<div>有效期：{{ item.card_period }}{{ item.card_period_type === 1?'天':'个月' }}</div>
					</div>
					<div v-if="item.brand_id == venue.id"
						style="display: flex;color: #f49352;margin-top: 15px;font-size: 16px">
						<router-link :to="'/member/editmembercardname?type='+item.card_is_experience+'&id='+item.id">
							<div style="color: #2a5d9f;" class="mar-right20 cuPo foSi14"><i
									class="el-icon-edit-outline mar-right5" />编辑</div>
						</router-link>
						<div style="color: #000;" class="mar-right20 cuPo foSi14" @click.stop="deleteClick(item.id)"><i
								class="el-icon-delete mar-right5" />删除</div>
						<div v-if="item.card_state === 0" style="color: #000;" class="mar-right20 cuPo foSi14"
							@click.stop="tingClick(item.id,1)"><i class="el-icon-warning-outline mar-right5" />停用</div>
						<div v-if="item.card_state === 1" style="color: #000;" class="mar-right20 cuPo foSi14"
							@click.stop="tingClick(item.id,0)"><i class="el-icon-switch-button mar-right5" />启用</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="list.stored.length > 0" style="padding: 10px;margin-top: 20px">
			<div class="small_title">储值卡</div>
			<div style="display: flex;flex-wrap: wrap;">
				<div v-for="(item,index) in list.stored" :key="index" class="carditem">
					<img src="../../assets/member/card/is_common_card.png" class="xuanfu">
					<div style="display: flex;align-items: center">
						<div>
							<img class="typeimg" src="../../assets/member/card/card-type-3.png">
						</div>
						<div style="margin-left: 15px;font-size: 18px">
              <div>{{ item.name }}</div>
              <div style="font-size: 12px;color: #666666;">ID:{{ item.id }}</div>
            </div>
					</div>
					<div
						style="display: flex;justify-content: space-between;color: #f49352;margin-top: 15px;font-size: 16px">
						<div>售价：{{ item.sell_price }}</div>
						<div>有效期：{{ item.card_period }}{{ item.card_period_type === 1?'天':'个月' }}</div>
					</div>
					<div v-if="item.brand_id == venue.id"
						style="display: flex;color: #f49352;margin-top: 15px;font-size: 16px">
						<router-link :to="'/member/editmembercardname?type='+item.card_is_experience+'&id='+item.id">
							<div style="color: #2a5d9f;" class="mar-right20 cuPo foSi14"><i
									class="el-icon-edit-outline mar-right5" />编辑</div>
						</router-link>
						<div style="color: #000;" class="mar-right20 cuPo foSi14" @click.stop="deleteClick(item.id)"><i
								class="el-icon-delete mar-right5" />删除</div>
						<div v-if="item.card_state === 0" style="color: #000;" class="mar-right20 cuPo foSi14"
							@click.stop="tingClick(item.id,1)"><i class="el-icon-warning-outline mar-right5" />停用</div>
						<div v-if="item.card_state === 1" style="color: #000;" class="mar-right20 cuPo foSi14"
							@click.stop="tingClick(item.id,0)"><i class="el-icon-switch-button mar-right5" />启用</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getsearchList,
		stopuse,
		getDelName
	} from '@/api/member'
	import Cookies from 'js-cookie'
	export default {
		name: 'ArticleList',
		components: {},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				list: null,
				total: 0,
				type: 0,
				listLoading: false,
				statuslist: [{
					value: '',
					label: '不指定'
				}, {
					value: 0,
					label: '启用'
				}, {
					value: 1,
					label: '停用'
				}], // 营销活动
				search: {
					card_state: '',
					name: '',
					card_is_experience: 0
				},

				tableData: {
					numberoftimes: [{
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}], // 次数卡
					term: [{
						id: 1
					}], // 期限卡
					storedvalue: [{
						id: 1
					}] // 储值卡
				},
				listQuery: {
					page: 1,
					limit: 0
				},
				venue: {}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		watch: {
			'$route'(to, from) {
				// 在mounted函数执行的方法，放到该处
				// 加载页面数据的方法
				var query = this.$route.query
				if (query.type) {
					this.search.card_is_experience = Number(query.type)
				}
				this.getList()
			}
		},
		created() {
			var query = this.$route.query
			if (query.type) {
				this.search.card_is_experience = Number(query.type)
			}
			var venue = localStorage.getItem('venue')
			if (venue) {
				this.venue = JSON.parse(venue)
			}
			console.log('场馆信息', this.venue)
			var xuanList = [{
				name: '会员卡种类',
				url: '/member/membercardname?type=0',
				pd: true
			}, {
				name: '体验卡种类',
				url: '/member/membercardname?type=1',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				getsearchList(this.search).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.list = data
				})
			},
			deleteClick(id) {
				this.$confirm('确定删除吗？删除后已经发给会员的该种类的卡都将删除，此操作不可恢复。', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					getDelName({
						'id': id
					}).then(response => {
						const {
							data
						} = response
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
						this.getList()
					})
				})
			},
			tingClick(id, card_state) {
				console.log(card_state)
				if (card_state === 1) {
					this.$confirm('停用后将不再显示到发卡列表中，已办理会员不影响使用，确定要停用当前会员卡？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						var data = {
							id: id,
							card_state: card_state
						}
						stopuse(data).then(response => {
							this.$message({
								type: 'success',
								message: '已停用!'
							})
							this.getList()
						}).catch(error => {
							console.log(error)
						})
					})
				} else {
					var data = {
						id: id,
						card_state: card_state
					}
					stopuse(data).then(response => {
						this.getList()
					}).catch(error => {
						console.log(error)
					})
				}
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: rgb(32, 146, 48);
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	.small_title {
		font-size: 13px;
		color: #575757;
	}

	.typeimg {
		width: 70px;
		height: 40px;
	}

	.carditem {
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 10px;
		width: 270px;
		height: 150px;
		margin-top: 10px;
		margin-bottom: 10px;
		position: relative;
		margin-right: 20px;
	}

	.xuanfu {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 50px;
		height: 50px;
	}
</style>
